/*
 * @Author: yangzonglong
 * @Date: 2021-03-04 15:04:22
 * @version: v1.0.0
 * @Descripttion: 
 * @LastEditors: yangzonglong
 * @LastEditTime: 2021-04-27 15:56:36
 * @Auditor: 
 */
import React, { useMemo, useRef } from 'react';
import { InputNumber } from 'antd';
import { regExpPatterns } from '../../../config';
import styles from './style.module.scss';
import { units } from '@library';

const parser = (value: string | undefined) => {
  if (value) return value.replace(/\$\s?|(,*)/g, '');
  return '';
};

const App = (props: any) => {
  const { disabled, onChange, options, value, _columns } = props;
  const tempFormat = useRef('');

  const numProps = useMemo(() => {
    return {
      max: typeof options.max === 'number' ? options.max : undefined,
      min: typeof options.min === 'number' ? options.min : undefined,
      step: options.step || undefined,
      precision: typeof options.precision === 'number' ? options.precision : undefined,
    };
  }, [options]);

  function formatter(value: any) {

    if (tempFormat.current) {
      const temp = tempFormat.current;
      tempFormat.current = '';
      return temp;
    }

    const arr = (value + '').split('.');
    let integer = arr[0] || '';

    if (integer.length > 3) {
      let str = '', len = integer.length;

      for (let i = len - 1; i >= 0; i--) {
        if ((len - i) % 3 === 0 && i !== 0) {
          str = ',' + integer[i] + str;
        } else {
          str = integer[i] + str;
        }
      }

      if (disabled) {
        if (arr[1]?.length === 1) {
          return str + '.' + arr[1] + 0;
        }

        if (arr[1]?.length > 2) {
          return str + '.' + arr[1].substring(0, 2);
        }

        return str + '.' + (arr[1] || '00');
      }

      if (!(value + '').includes('.')) return str;
      return str + '.' + (arr[1] || '');
    } else {
      if (disabled) {
        if (isNaN(value.replace(/,/g, ''))) {
          value = '0.00';
        } else {
          if (arr[1]) {
            if (arr[1].length >= 2) {
              value = `${arr[0]}.${arr[1].substring(0, 2)}`;
            } else {
              value = `${arr[0]}.${arr[1]}0`;
            }
          } else if (arr[0]) {
            value = `${arr[0]}.00`;
          }
        }
      }
      return value;
    }
  }


  function onBlur(e: React.BaseSyntheticEvent) {
    console.log(options);
    if (options?.formatterMoney) {
      const value = (e.target.value || '');
      const arr = value.split('.');

      if (isNaN(value.replace(/,/g, ''))) {
        tempFormat.current = '0.00';
      } else {
        if (arr[1]) {
          if (arr[1].length >= 2) {
            tempFormat.current = `${arr[0]}.${arr[1].substring(0, 2)}`;
          } else {
            tempFormat.current = `${arr[0]}.${arr[1]}0`;
          }
        } else if (arr[0]) {
          tempFormat.current = `${arr[0]}.00`;
        }
      }
    }
    if (options?.checkRule) {
      const res = regExpPatterns[options?.checkRule];
      if (!res.pattern.test(value)) {
        units.message.warning(res.message);
        onChange('');
      }
    }
  }


  const placeholder = localStorage.i18nextLng === 'en' ? options?.placeholderEn : options?.placeholder;

  return (
    <InputNumber
      className={styles['money_' + (_columns.textAlign || 'left')]}
      size='small'
      placeholder={placeholder}
      value={value}
      onChange={onChange}
      disabled={disabled || options.bindName}
      controls={options?.hideArrow ? false : true}
      {...(options?.formatterMoney || options.checkRule ? {
        onBlur: onBlur,
      } : numProps)}
      {...(options?.formatterMoney ? {
        parser,
        formatter,
        step: 0.01,
        precision: 2,
        max: numProps.max,
        min: numProps.min,
      } : numProps)}
    />

  );
};

export default App;